<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A" back-color=" -webkit-linear-gradient(top,#58B042 10%,#FFFFFF 140%)"
      status-color="#ffffff" :fixed="false">
    </snackbar>
    <!-- <img class="div1_img" src="../imgae/返回.svg" alt=""> -->
    <div class="bai">
      <div class="test-t">
        <span>头像</span>
      </div>
      <div @click="upload()" class="xiang">
        <button class="buttn">
          <img v-if="imgs==true" class="img-xiang" mode="aspectFit" src="../../assets/image/camera.png">
          <img v-if="imgs==false" class="img-to" src="../../assets/image/Snipaste.png" alt="">
        </button>
      </div>
      <div class="he"></div>
      <div v-if="success==true" class="Pop-ups">
        <div class="link-h1"><span>注册成功，点击加入公司</span></div>
        <hr>
        <div @click="determine_2()" class="link-h2"><span>确定</span></div>
      </div>
      <div class="flex-matop">
        <span v-if="imgs==false" class="test">请输入身份证号</span>
        <input class="word7" v-model="ID" type="text" placeholder="请输入身份证号码">
      </div>
      <div @click="determine()" class="wrap-7">
        <span>确定</span>
      </div>
      <div class="but">
        <img @click="hooks()" v-if="hook==true" class="img-go" mode="aspectFit" src="../../assets/image/greenHook.png"
          alt="">
        <img @click="hooks()" v-if="hook==false" class="img-go" mode="aspectFit" src="../../assets/image/greyHook.png"
          alt="">
        <span class="word3">
          请您阅读并同意&nbsp;炳圣建工用户协议和隐私协议
        </span>
      </div>
    </div>
    <div v-if="pictures==true" class="picture">
      <div @click="choice()" class="txt1">
        <span>拍摄</span>
      </div>
      <!-- <hr> -->
      <div @click="choice()" class="txt2">
        <span>从相册选择</span>
      </div>
      <!-- <hr> -->
      <div @click="upload()" class="txt3">
        <span>取消</span>
      </div>
    </div>
    <div v-if="success==true||pictures==true" class="mack"></div>
  </div>
</template>

<script>
  export default {
    name: 'Information',
    data() {
      return {
        hook: true,
        pictures: false,
        imgs: true,
        success: false,
        ID: "",
      }
    },
    methods: {
      hooks() {
        this.hook = !this.hook
      },
      upload() {
        this.pictures = !this.pictures
      },
      choice() {
        this.imgs = false
        this.ID = "45052342342342"
        this.pictures = !this.pictures
      },
      determine() {
        this.imgs = false
        this.ID = "45052342342342"
        this.success = true
      },
      determine_2() {
        this.success = false
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-income-layout {
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(top, #58B042 10%, #FFFFFF 140%);
    overflow-y: auto;

    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      // background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }
  }

  .my-income-layout::-webkit-scrollbar {
    display: none;
  }

  .bai {
    font: "苹方-简 中粗体"12px;
    width: 92%;
    border-radius: 38px;
    background-color: rgba(255, 255, 255, 1);
    align-self: center;
    margin: 0 auto 3% auto;
    padding-bottom: 8%;
    padding-top: 8%;
    text-align: center;
  }

  .xiang {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100;
    height: 14vh;
    margin: 10% 0;
    border-radius: 10px;
  }

  .img-xiang {
    // margin: 0 auto;
    width: 9vh;
    display: block;
  }

  // .word7 {
  //   // margin-top: 19%;
  //   width: 83%;
  //   height: 6%;
  //   background-color: #F5F6F7;
  //   border-radius: 4px;
  //   border: solid 0px;
  // }

  .test-t {
    margin-top: 0%;
  }

  .but {
    margin: 6% 0 3% 0;
    z-index: auto;
    justify-content: space-between;
  }

  .word3 {
    color: #4A4A4A;
    font-size: 7px;
    top: -7px;
  }

  .word3 a {
    text-decoration: none;
    color: #4A4A4A;
  }

  .img-go {
    width: 20px;
    height: 20px;
  }

  .wrap-7 {
    margin-top: 11%;
    width: 82%;
    padding: 3% 0;
    background-color: #B2D9A8;
    border-radius: 4px;
    margin-left: 9%;
    padding-top: 4%;
    border-radius: 2px;
  }

  .flex-matop {
    font-family: PingFangSC-Regular;
    margin: 20% auto 0 auto;

  }

  .word7 {
    // padding-top: 4%;
    padding:  2% 0;
    font-size: 18px;
    width: 82%;
    height: 22%;
    background-color: #F5F6F7;
    border-radius: 4px;
    border: solid 0px;
    // margin-top: 28%;
    text-align: center;
  }

  input::-webkit-input-placeholder {
    text-align: center;
  }

  .picture {
    width: 100%;
    height: 30%;
    background-color: #FFFFFF;
    z-index: auto;
    text-align: center;
    position: absolute;
    bottom: -5%;
    border-radius: 24px;
    Position: bottom;
    display: block;
    z-index: 10;
  }

  .txt1 {
    height: 7vh;
    line-height: 7vh;
    border-bottom: solid 1px #979797;
    // margin-top: 7%;
    // padding-bottom: 5%;
  }

  .txt2 {
    height: 7vh;
    line-height: 7vh;
    border-bottom: solid 1px #979797;
  }

  .txt3 {
    height: 11vh;
    line-height: 7vh;
    // background-color: #007AFF;
  }

  .buttn {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #F5F6F7;
    border: 0px solid #979797;
  }

  .img-to {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 10px;
    border: 0px solid;
    border-radius: 8px;
  }

  .test {
    margin: 0 auto 2% auto;
    text-align: left;
    width: 83%;
    font-size: 11px;
    color: #4A4A4A;
    display: block;
  }

 .Pop-ups {
   background-color: #FFFFFF;
   width: 67%;
   height: 20%;
   position: absolute;
   left: 16%;
   top: 29%;
   text-align: center;
   border-radius: 10px;
   display: block;
   z-index: 10;
 }

  .link-h1 {
    padding-top: 16%;
    padding-bottom: 10%;
  }

  .link-h2 {
    text-align: center;
    padding-top: 4%;
  }

  .he {
    height: 100%;
    width: 100%;
    background-color: #979797;
    opacity: calc(0.2);
    display: none;
  }

  .mack {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    background-color: #333333;
    z-index: 1;
  }
</style>
